<template>
	<view class="order-list" :class="themeName">
		<!-- Tabs -->
		<navbar :title="title"></navbar>

		<!-- Order Lists -->
		<view class="order-item">
			<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
				  auto: false,
				  noMoreSize: 3,
				  empty: {
				  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
				  	tip: $zhTran('暂无业务员~'),
				  	fixed: true
				  }
			  }" :down="{ auto: false }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="order" v-for="item,idx in allclientList" :key="idx ">
					<!-- Order Header -->
					<view :class="item.value == csppl_sale?'selected sort-sel flex p-l-10':' sort-sel flex p-l-10'"
						@click="choose(item)">
						<image :src="item.avatar" mode="widthFix" class="avatar m-r-20" v-if="item.value != ''"></image>
						<text>{{item.label}}</text>
					</view>
				</view>
				<view class="p-20 text-center muted sm" v-if="clientCount > 0">{{clientCount}} {{$zhTran('位业务员')}}
				</view>
				<view class="p-20 text-center muted sm" v-else>{{$zhTran('暂无业务员')}}</view>
			</mescroll-uni>
		</view>

	</view>
</template>


<script>
	import {
		apiCitySupplierSalemanAll,
	} from '@/api/citysupplier'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		name: 'ChooseSaleman',
		mixins: [MescrollMixin],
		data() {
			return {
				title: this.$zhTran('归属业务员'),
				csppl_id: '',
				csppl_sale: '',
				del_sale: '',
				allclientList: [],
				clientCount: 0,
				eventChannel: null,
				options: {}
			}
		},

		computed: {},

		methods: {
			// 刷新订单数据 @Mixins【/src/mixins/order.js】内调用，请勿删除
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiCitySupplierSalemanAll({
					csppl_id: this.csppl_id,
					del_sale: this.del_sale,
					mode: 1,
					page_no: num,
					page_size: size,
				}).then(data => {
					if (this.del_sale == '') {
						if (num === 1) this.allclientList = [{
							label: "全部",
							value: ''
						}]
						this.allclientList = [...this.allclientList, ...data]
						this.clientCount = this.allclientList.length - 1
					} else {
						if (num === 1) this.allclientList = []
						this.allclientList = [...this.allclientList, ...data]
						this.clientCount = this.allclientList.length
					}
					this.allclientList = this.$zhTran(this.allclientList)
					this.mescroll.endSuccess(data.length, 0)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
			choose(row) {
				this.eventChannel.emit("reSetData", row);
				uni.navigateBack({
					delta: 1
				});
			},
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel()
			this.eventChannel = eventChannel
			eventChannel.on("receiveData", (data) => {
				const {
					csppl_id,
					csppl_sale,
					del_sale,
					title
				} = this.$zhTran(data)
				console.log(data)
				this.csppl_id = csppl_id
				this.csppl_sale = csppl_sale
				this.del_sale = del_sale
				this.title = title

				this.refreshOrderData()
				setTimeout(() => {}, 0.5 * 1000)
			});
		},
		onUnload() {},
	}
</script>


<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.order-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.order-item {
			flex: 1;
			min-height: 0;
			padding: 20rpx;
		}
	}

	.order {
		padding-bottom: 15rpx;

		.sort-sel {
			color: rgba(56, 56, 56, 1);
			background-color: #fff;
			font-size: 32rpx;
			font-weight: bold;
			padding: 30rpx;
			text-align: center;
			margin-bottom: 15rpx;
			border-radius: 10rpx;

			&.selected {
				color: #fff;
				background-color: rgba(64, 115, 250, 1);
			}

			.avatar {
				border: 1rpx solid #ddd;
				width: 80rpx;
				border-radius: 50rpx;
			}
		}
	}
</style>